<!--
  * 「奖品说明」弹窗
  * @author: Ruan Jiazhen
  * @date: 2024-04-22  11:11:58
-->
<template>
  <uni-popup ref="popup">
    <div class="popup-content">
      <image
        class="title"
        src="@/assets/image/award-details-popup/title.png"
        mode="aspectFit"
      />
      <div class="tip">
        （活动结束后，请获奖的老师联系我们获取奖品）
      </div>
      <scroll-view
        class="detail-box"
        scroll-y
        :enhanced="true"
        :show-scrollbar="false"
      >
        <image
          class="detail-box__img"
          :src="detailImg"
          mode="widthFix"
        />
      </scroll-view>
      <button
        class="i-know"
        @click="close"
      >
        我知道了
      </button>
    </div>
  </uni-popup>
</template>

<script setup lang="ts">
const detailImg = ref('');
const popup = ref<UniHelper.UniPopup>();

const open = (newDetailImg:string) => {
  detailImg.value = newDetailImg;
  popup.value?.open();
};

const close = () => {
  popup.value?.close();
};

defineExpose({
  open,
  close,
});
</script>

<style scoped lang="scss">

.popup-content {
  width: min(92.2667vw, 370px);

  background-color: #fff;
  border-radius: 16px;

  padding: 22px 16px 24px;
  display: grid;
  grid-template:
    'title' max-content
    'tip' max-content
    'detail-box' min(600px, 60vh)
    'i-know' max-content
    / 1fr;
  row-gap: 10px;

  .title{
    grid-area: title;

    width: 100%;
    height: 21px;
  }

  .tip{
    grid-area: tip;

    width: 100%;

    display: flex;
    justify-content: center;

    font-size: 14px;
    color: #999;

  }

  .detail-box {
    grid-area: detail-box;
    margin-top: 7px;

    width: 100%;
    max-height: 100%;
    overflow: scroll;

    display: flex;
    flex-direction: column;
    align-items: center;

    &__img{
      width: 100%;
    }
  }

  .i-know{
    grid-area: i-know;
    justify-self: center;
    margin-top: 10px;

    width: 240px;
    height: 36px;

    background: $button-bg;
    border-radius: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 15px;
    color: #fff;
  }
}
</style>
